<template>
  <div class="order-list">
    <order-header title="订单列表">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话</span>
      </template>
    </order-header>
    <div class="wrapper">
      <div class="wrapper-body">
        <div class="order-box">
          <div style="height: 80px">
            <ul class="filter-list">
              <li v-for="(item,index) in liMenu" @click="liSelect(item)"
                  :class="index==liSelectIndex?'select-li':''">{{item.name}}
              </li>
            </ul>
          </div>
          <loading v-if="loading"></loading>
          <!--订单详情-->
          <order-body @orderUpdate="orderUpdate" :list="list"></order-body>
          <!-- 第二种方式：点击按钮，加载数据
          <div class="load-more">
              <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
          </div> -->
          <!-- 第三种方式(使用vue-infinite-scroll插件)：滚动加载数据
          <div class="scroll-more"
            v-infinite-scroll="scrollMore"
            :infinite-scroll-disabled="busy"
            infinite-scroll-distance="410"
          >
            <img v-show="loading" src="/imgs/loading-svg/loading-spinning-bubbles.svg">
          </div> -->
          <no-data v-if="!loading && list.length==0"></no-data>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import OrderHeader from './../components/OrderHeader'
  import Loading from './../components/Loading'
  import NoData from './../components/NoData'
  import {Pagination, Button} from 'element-ui'
  import orderBody from "./orderBody";
  // 分页第三种方式（使用插件）：滚动加载数据
  import infiniteScroll from 'vue-infinite-scroll'
  import axios1 from 'axios'

  const instance = axios1.create({
    baseURL: 'http://152.136.185.210:8000/api/n3'
  })
  export default {
    name: 'order-list',
    components: {
      OrderHeader,
      Loading,
      NoData,
      // [变量]表示加载变量， Pagination.name就是el-pagination；Button.name就是el-button
      [Pagination.name]: Pagination,
      [Button.name]: Button,
      orderBody
    },
    directives: {
      infiniteScroll
    },
    data() {
      return {
        liSelectIndex: 0,
        liMenu: [{name: '全部订单', type: '1'}, {name: '未支付', type: '2'}, {name: '已支付', type: '3'}, {
          name: '已发货',
          type: '4'
        },
          {
            name: '待收货',
            type: '5'
          },
          {
            name: '交易成功',
            type: '6'
          }
        ],
        loading: false,
        socket1: "",
        username: sessionStorage.getItem('username'),
        // list: [{
        //   'createTime': '2021-02-1',
        //   'orderNo': '23132',
        //   "paymentTypeDesc": "在线支付",
        //   "payment": '20',
        //   "status":1,
        //   "statusDesc":"待支付",
        //   items: [{
        //     'imgurl': 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1647431025.11693058.png?thumb=1&w=87&h=87',
        //     'productName': "小米11",
        //     "currentUnitPrice":4,
        //     "quantity":1,
        //   }]
        // },
        //   {
        //     'createTime': '2021-02-1',
        //     'orderNo': '23132',
        //     "paymentTypeDesc": "在线支付",
        //     "payment": '20',
        //     "status":1,
        //     "statusDesc":"待支付",
        //     items: [{
        //       'imgurl': 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1647431025.11693058.png?thumb=1&w=87&h=87',
        //       'productName': "小米11",
        //       "currentUnitPrice":4,
        //       "quantity":1,
        //     }]
        //   },
        //
        // ],
        list: [],

        // showNextPage: true // 加载更多：是否显示按钮(即数据加载完了，没有更多则不显示按钮)
        // busy: false // 滚动加载，是否触发
      }
    },
    created() {
      console.log("穿件")
      let status = this.$route.query.status
      if (status != undefined) {
        this.liSelectIndex = status
        // this.liSelectIndex(status)
      }


      this.getOrderList()
    },
    mounted() {
      this.connectWebsocket()
    },
    destroyed() {
      console.log("销毁")
      this.socket1.close()
    },
    methods: {
      orderUpdate() {
        this.liSelectIndex=0
        this.list=[]
        this.getOrderList()
      },
      connectWebsocket() {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket1 = new WebSocket('ws://www.zbclmg.xyz:8081/takseGoodsSocket/' + this.username + "takeGoods")
          // 监听socket连接
          this.socket1.onopen = this.open
          // 监听socket错误信息
          this.socket1.onerror = this.error
          // 监听socket消息
          this.socket1.onmessage = this.getMessage
        }
      },
      open: function () {
        console.log("socket连接成功")
      },
      error: function () {
        console.log("连接错误")
      },
      getMessage: function (msgb) {
      this.liSelectIndex=3
        let item={
        name: '已发货', type: '4'
        }
        this.liSelect(item)
        this.$notify({
          title: '发货通知',
          message: msgb.data,
          duration: 0
        });

      },
      send: function () {
        this.socket1.send(params)
      },
      close: function () {
        alert("已关闭")
        console.log("socket已经关闭")
      },
      liSelect(item) {
        this.liSelectIndex = item.type - 1
        this.$axios.get('/orders/getorderlist', {
            params: {
              // pageSize: 10,
              // pageNum: this.pageNum,
              username: sessionStorage.getItem("username"),
              statusDesc: item.name
            }
          }
        ).then((res) => {
          console.log(this.list)
          this.loading = false
          this.list = res.list
          // 第二种和第三钟方式(滚动加载和点击按钮加载更多)：请求的数据条数拼接，而不是替换成新的
          // this.list = this.list.concat(res.list)
          this.total = res.total
          // this.showNextPage = res.hasNextPage
          // this.busy = false
        })

      },
      getOrderList() {
        this.loading = true
        console.log(localStorage.getItem("useranme"))
        // this.busy = true
        this.$axios.get('/orders/getorderlist', {
          params: {
            // pageSize: 10,
            // pageNum: this.pageNum,
            username: localStorage.getItem("username"),
            statusDesc: '全部订单'
          }
        }).then((res) => {
          this.loading = false
          this.list = res.list
          // 第二种和第三钟方式(滚动加载和点击按钮加载更多)：请求的数据条数拼接，而不是替换成新的
          // this.list = this.list.concat(res.list)
          this.total = res.total
          // this.showNextPage = res.hasNextPage
          // this.busy = false
        }).catch(() => {
          this.loading = false
        })
      },
      goPay(orderNo) {
        // 三种路由跳转方式
        // this.$router.push('/order/pay')
        // this.$router.push({
        //   name: 'order-pay',
        //   query: {
        //     orderNo: orderNo
        //   }
        // })
        this.$router.push({
          path: '/order/pay',
          query: {
            orderNo
          }
        })
      },

      /* 第二种方法：加载更多按钮
      loadMore () {
        this.pageNum++
        this.getOrderList()
      },
      */
      /* 第三种方法：滚动加载，通过npm插件实现
      scrollMore () {
        this.busy = true
        setTimeout(() => {
          this.pageNum++
          this.getList()
        }, 500)
      },
      */
      /* 专门给scrollMore使用
      getList () {
        this.loading = true
        this.$axios.get('/orders', {
          params: {
            pageSize: 10,
            pageNum: this.pageNum
          }
        }).then((res) => {
          this.list = this.list.concat(res.list)
          this.loading = false
          if (res.hasNextPage) {
            this.busy = false
          } else {
            this.busy = true
          }
        })
      }
      */
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';

  .filter-list {
    float: left;
    margin: 0;
    padding: 18px;
    list-style-type: none;
    font-size: 16px;
    line-height: 15px;
  }

  .select-li {
    color: #ff6700;
    font-size: 20px;
    font-weight: bold;
  }

  .filter-list li {
    float: left;
    padding: 0 20px;
    cursor: pointer;

  }

  .order-list {
    .wrapper {
      background-color: #fbfbfb;
      padding-top: 33px;
      padding-bottom: 110px;

      .wrapper-body {

        padding: 0 15%;
      }

      .order-box {

        .pagination {
          text-align: right;
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: $colorA;
        }

        .el-button--primary {
          background-color: $colorA;
          border-color: $colorA;
        }

        .load-more, .scroll-more {
          text-align: center;
        }
      }
    }
  }
</style>
